/**
 * @copyright   2010-2017, The Titon Project
 * @license     http://opensource.org/licenses/BSD-3-Clause
 * @link        http://titon.io
 */

@include export("select") {
    #{generate-class-name($titon-select)} {
        @extend %placeholder-inline-block;

        select {
            @extend %placeholder-position-absolute;
            opacity: 0;
            width: 100%;
        }

        // Position the real select over the custom one
        &.is-native {
            select {
                z-index: 5;
                height: 100%;
                cursor: pointer;
            }
        }
    }

    #{generate-class-name($titon-select, "toggle")} {
        @extend %placeholder-inline-block;
        cursor: pointer;
        background: theme-setting("bg-light");
        border: 1px solid theme-setting("border-accent");
        white-space: nowrap;
        line-height: 1;
        z-index: 3;
        display: flex;
    }

    #{generate-class-name($titon-select, "arrow")} {
        @include size-medium;
    }

    #{generate-class-name($titon-select, "label")} {
        @include size-medium;
        flex-grow: 1;
    }

    //-------------------- Menu --------------------//

    @if map-get($titon-select, "dropdown-menu") {
        #{generate-class-name($titon-select, "menu")} {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            min-width: 15rem;
            max-height: 25rem;
            overflow: auto;
            z-index: map-get($titon-settings-zindex, "drop");
            opacity: 0;
            visibility: hidden;
            transition: all map-get($titon-select, "transition");

            ol {
                @extend %placeholder-list;
            }

            // Active
            &.is-expanded {
                @extend %placeholder-show;
            }

            // States
            &.hide-selected {
                .is-selected {
                    display: none !important;
                }
            }
        }

        #{generate-class-name($titon-select, "group")},
        #{generate-class-name($titon-select, "option")} {
            display: block;
            padding: theme-setting("small-padding");
        }

        #{generate-class-name($titon-select, "option")} {
            cursor: pointer;
        }

        #{generate-class-name($titon-select, "option-desc")} {
            display: block;
            font-size: theme-setting("small-font-size");
        }
    }
}
